
function createSealEx1() {
    var txtcn = document.getElementById("txtcn");
    var txten = document.getElementById("txten");
    var txtdep = document.getElementById("txtdep");
    var sealObj = document.getElementById("sealdiv");
    sealObj.innerHTML = "<canvas id='canvas' width='160' height='160'></canvas>";
    createSeal1('canvas', txtcn.value, txten.value, txtdep.value);
}
function createSealEx2() {
    var txtcn = document.getElementById("txtcn");
    var txten = document.getElementById("txten");
    var txtdep = document.getElementById("txtdep");
    var sealObj = document.getElementById("sealdiv");
    sealObj.innerHTML = "<canvas id='canvas' width='160' height='160'></canvas>";
    createSeal2('canvas', txtcn.value, txten.value, txtdep.value);
}

function createSealEx3() {
    var txtcn = document.getElementById("txtcn");
    var txten = document.getElementById("txten");
    var txtdep = document.getElementById("txtdep");
    var sealObj = document.getElementById("sealdiv");
    sealObj.innerHTML = "<canvas id='canvas' width='165' height='165'></canvas>";
    createSeal3('canvas', txtcn.value, txten.value, txtdep.value);
}
function createSealEx4() {
    var txtcn = document.getElementById("txtcn");
    var txten = document.getElementById("txten");
    var txtdep = document.getElementById("txtdep");
    var sealObj = document.getElementById("sealdiv");
    sealObj.innerHTML = "<canvas id='canvas' width='165' height='165'></canvas>";
    createSeal4('canvas', txtcn.value, txtdep.value);
}

function createSeal1(id, company, english, depname) { 
    var canvas = document.getElementById(id);
    var context = getCtx(canvas); 
    var width = canvas.width / 2, height = canvas.height / 2;
    // 边框1, 边框2
    drawCircle(context, width, height, 2, 78);
    drawCircle(context, width, height, 1, 63);
    //画五角星
    draw5star(context, width, height, 20, 0);
    // 绘制印章类型
    drawRowtxt(context, depname, 'bolder 15px SimSun', width, height+43);
    // 绘制印章中文单位   
    context.translate(width, height); // 平移到此位置, 
    context.font = 'bolder 18px SimSun'
    drawCirtxt(context, company, 4, 5, 57);
    //绘制印章英文单位
    context.translate(width - 80, height - 80); // 平移到此位置,
    context.font = 'bolder 10px SimSun';
    drawCirtxt(context, english, 4, 4.05, 75);
}

function createSeal2(id, company, english, depname) {
    var canvas = document.getElementById(id);
    var context = getCtx(canvas); 
    var width = canvas.width / 2, height = canvas.height / 2;
    // 绘制印章边框
    drawCircle(context, width, height, 3, 78);
    drawCircle(context, width, height, 1, 75);
    //画五角星
    draw5star(context, width, height-10, 25, 0);
    // 绘制印章名称
    drawRowtxt(context, depname, 'bolder 20px FangSong', width, height+30);
    // 绘制印章单位   
    context.translate(width, height); // 平移到此位置,
    context.font = 'bolder 20px FangSong';
    drawCirtxt(context, company, 3.5, 5.5, 69);
    // 绘制印英文字符   
    context.translate(0, 3); // 平移到此位置,
    context.font = '12px Tahoma' // Arial Helvetica,Tahoma
    drawCirtxt(context, english, 1.7, 0.8, 70);
}

function createSeal3(id, company, english, depname) {
    var canvas = document.getElementById("canvas");
    var context = getCtx(canvas); 
    var width = canvas.width / 2, height = canvas.height / 2;
    //3个参数： 左边距 上边据 宽度 椭圆扁度
    drawEllipse(context, 85, 79, 79, 55, 2); //椭圆1
    context.lineWidth = 1;
    drawEllipse(context, 85, 79, 76, 52, 2); //椭圆2
    context.lineWidth = 2;
    drawEllipse(context, 85, 79, 63, 39, 2); //椭圆3
    //绘制英文
    drawElltxt(context, width, height, english, 58, {v1:220,v2:-40}, {v1:70,v2:45}, {v1:12,v2:-20}, "bolder 10px SimSun");
    // 绘制印章类型
    drawRowtxt(context, company.substring(0, 5),  'bolder 14px SimSun', width-11, height-5);
    drawRowtxt(context, company.substring(5, 10), 'bolder 14px SimSun', width-11, height+10);
    drawRowtxt(context, company.substring(10),    'bolder 12px SimSun', width-11, height+25);
    // 绘制印章类型
    drawRowtxt(context, depname, 'bolder 14px SimSun', width-12, height+45);
}

function createSeal4(id, company, depname) {
    var canvas = document.getElementById("canvas");
    var context = getCtx(canvas); 
    var width = canvas.width / 2, height = canvas.height / 2;
    //3个参数： 左边距 上边据 宽度 椭圆扁度
    drawEllipse(context, 85, 79, 79, 55, 2); //椭圆1
    drawEllipse(context, 85, 79, 76, 52, 1); //椭圆2
    // 绘制印章类型
    drawRowtxt(context, depname, 'bolder 15px SimSun', width+3, height+10);
    //绘制中文
    drawElltxt(context, width, height, company, 58, {v1:170,v2:15}, {v1:66,v2:57}, {v1:6,v2:-14}, "12px SimSun");
}

function getCtx(canvas) {
    var ctx = canvas.getContext("2d");
    ctx.textBaseline = 'middle'; // 设置文本的垂直对齐方式
    ctx.textAlign = 'center'; // 设置文本的水平对对齐方式
    ctx.translate(0, 0); //移动坐标原点 
    return ctx;
}

// 绘制椭圆
function drawEllipse(ctx, x, y, a, b, npx, color) {
    ctx.strokeStyle = color ? color : '#f00'; //设置边框颜色
    ctx.lineWidth = npx;
    var k = .5522848,
    ox = a * k,
    // 水平控制点偏移量
    oy = b * k; // 垂直控制点偏移量</p> <p> 
    ctx.beginPath();
    //从椭圆的左端点开始顺时针绘制四条三次贝塞尔曲线
    ctx.moveTo(x - a, y);
    ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b);
    ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y);
    ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b);
    ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y);
    ctx.closePath();
    ctx.stroke();
};
// 绘制椭圆文字 
function drawElltxt(ctx, width, height, string, rad1, ang2, rat2, rad2, font, color) {
    //ctx.save();
    ctx.strokeStyle = color ? color : '#f00'; //设置边框颜色
    var circle = {x:width, y:height, radius:rad1};
    var startAngle = ang2.v1; //220; //控制字符起始位置度数
    var endAngle = ang2.v2; //-40; //首位字符相隔度数
    var radius = circle.radius //圆的半径
    var angleDecrement = (startAngle-endAngle) / (string.length-1) //每个字母占的弧度
    ctx.font = font; // "bolder 10px SimSun";
    ctx.lineWidth = 1; //设置字体胖瘦
    var ratioX = rat2.v1 / circle.radius; //70 / circle.radius; //横轴缩放比率
    var ratioY = rat2.v2 / circle.radius; //45 / circle.radius; //纵轴缩放比率
    //进行缩放（均匀压缩） 重点
    ctx.scale(ratioX, ratioY);
    var index = 0;
    for (var index = 0; index < string.length; index++) {
        // 保存之前的设置开始绘画
        var xx = Math.cos((Math.PI / 180) * startAngle) * radius - rad2.v1,
            yy = Math.sin((Math.PI / 180) * startAngle) * radius + rad2.v2;
        ctx.save();
        ctx.beginPath();
        ctx.translate(circle.x + xx, circle.y - yy) //绘制点 +-微调
        ctx.rotate((Math.PI / 2) - (Math.PI / 180) * startAngle); //Math.PI/2为旋转90度  Math.PI/180*X为旋转多少度
        ctx.fillText(string.charAt(index), 0, 0);
        ctx.strokeText(string.charAt(index), 0, 0);
        startAngle -= angleDecrement;
        ctx.restore();
    }
    //ctx.stroke();
}

// 绘制圆圈图案
function drawCircle(ctx, width, height, npx, rad, color) {
    //ctx.save();
    ctx.lineWidth = npx;
    ctx.strokeStyle = color ? color : '#f00';
    ctx.beginPath();
    ctx.arc(width, height, rad, 0, Math.PI * 2);
    ctx.stroke();
    ctx.restore();
}
// 绘制圆型文字 
function drawCirtxt(ctx, string, angx, startx, movex) {
    //ctx.save();
    var count = string.length; // 字数 company/english
    var angle = angx * Math.PI / (3 * (count - 1)); // 字间角度   
    var chars = string.split("");
    var c;
    for (var i = 0; i < count; i++) {
        c = chars[i]; // 需要绘制的字符   
        if (i == 0) ctx.rotate(startx * Math.PI / 6);
        else ctx.rotate(angle);
        ctx.save();
        ctx.translate(movex, 0); // 平移到此位置,此时字和x轴垂直   
        ctx.rotate(Math.PI / 2); // 旋转90度,让字平行于x轴   
        ctx.fillText(c, 0, 5); // 此点为字的中心点   
        ctx.restore();
    }
}

// 绘制五角星  
function draw5star(ctx, sx, sy, radius, rotato, color) {
    ctx.save();
    ctx.fillStyle = color ? color : '#f00';
    ctx.translate(sx, sy); //移动坐标原点  
    ctx.rotate(Math.PI + rotato); //旋转  
    ctx.beginPath(); //创建路径  
    var x = Math.sin(0);
    var y = Math.cos(0);
    var dig = Math.PI / 5 * 4;
    for (var i = 0; i < 5; i++) { //画五角星的五条边  
        var x = Math.sin(i * dig);
        var y = Math.cos(i * dig);
        ctx.lineTo(x * radius, y * radius);
    }
    ctx.closePath();
    ctx.stroke();
    ctx.fill();
    ctx.restore();
}
// 绘制一行文字 
function drawRowtxt(ctx, string, font, x, y, color) {
    ctx.save();
    ctx.font = font; // 'bolder 20px FangSong'; 
    ctx.textBaseline = 'middle'; //设置文本的垂直对齐方式
    ctx.textAlign = 'center'; //设置文本的水平对对齐方式
    ctx.lineWidth = 1;
    ctx.fillStyle = color ? color : '#f00';
    ctx.fillText(string, x, y);
    ctx.stroke();
}
